<template>
  <view class="wrap">
    <view class="contentWrap">
      <img class="img" src="https://ainengli.hzjrsw.com/jkhx/test1.png" alt="" />
    </view>
    <view class="btnWrap">
      <view class="btn" @tap="buyMember">
        <img class="img" src="@/static/image/hmm/bayImg.png" alt="" />
      </view>
    </view>
    <up-popup :show="isShow" :round="32" mode="bottom" closeable @close="isShow = false">
      <view class="title">请确认会员服务使用人</view>
      <view class="contentVisit">
        <text class="name">{{ userInfo.patName }}</text>
        <text class="name">{{ userInfo.gender == '女性' ? '女' : '男' }}</text>
        <text class="name" v-if="userInfo.age">{{ userInfo.age ? userInfo.age : '' }}岁</text>
        <text class="name">{{ userInfo.relation }}</text>
        <!-- <text v-if="state.userInfo && state.userInfo.relation == '本人'" class="relationship"
              >本人</text
            >
            <text v-else class="relationship on">配偶</text> -->
      </view>
      <view class="pay">
        <view class="payName" @tap="immediatelyPay"> 立即支付 </view>
      </view>
    </up-popup>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { paying, getProduct, orderStatus } from '@/api/hmm'
import { onShow, onHide } from '@dcloudio/uni-app'
import { base_info } from '@/api/moreMessage'
import store from '@/store'
const state = reactive({
  timeQuestions: null
})
const userInfo = ref({})
const userInfoNew = ref({})
const productObj = ref({})
const isShow = ref(false)
const bizOrderNo = ref('')
onShow(() => {
  userInfo.value = uni.getStorageSync('userInfo')
    ? JSON.parse(uni.getStorageSync('userInfo')).patientInfo
    : {}
  userInfoNew.value = uni.getStorageSync('userInfo')
    ? JSON.parse(uni.getStorageSync('userInfo'))
    : {}
  init()
})
onHide(() => {
  clearInterval(state.timeQuestions)
  state.timeQuestions = null
})
const init = () => {
  uni.showLoading({
    title: '加载中'
  })
  getProduct().then((res) => {
    uni.hideLoading()
    if (res.code == 0) {
      productObj.value = res.data
    }
  })
}
const buyMember = () => {
  isShow.value = true
}
const immediatelyPay = () => {
  let param = {
    productId: productObj.value.productId,
    openId: userInfoNew.value.openId,
    channel: 'wechat_pay',
    method: 'jsapi',
    userId: userInfoNew.value.userId,
    phone: userInfoNew.value.phone,
    empi: userInfo.value.empi,
    patName: userInfo.value.patName
  }
  uni.showLoading({
    title: ''
  })
  paying(param).then((res) => {
    uni.hideLoading()
    let payParam = JSON.parse(res.data.payBody)
    bizOrderNo.value = res.data.bizOrderNo
    loopTime()
    uni.requestPayment({
      provider: 'wxpay',
      timeStamp: payParam.timeStamp,
      nonceStr: payParam.nonceStr,
      package: payParam.package,
      signType: payParam.signType,
      paySign: payParam.paySign,
      success: function (res) {
        clearInterval(state.timeQuestions)
        state.timeQuestions = null
        let params = {
          userId: userInfoNew.value.userId,
          empi: userInfo.value.empi
        }
        base_info(params).then((res) => {
          const info = Object.assign({}, JSON.parse(uni.getStorageSync('userInfo')))
          info.patientInfo = res.data
          store.commit('SET_USERINFO', info)
          uni.showToast({
            title: '支付成功',
            icon: 'none',
            duration: 2000
          })
          setTimeout(() => {
            uni.navigateBack()
          }, 2000)
        })
        console.log('success:' + JSON.stringify(res))
      },
      fail: function (err) {
        // uni.showToast({
        //   title: '支付失败,请重试',
        //   icon: 'error',
        //   duration: 2000
        // })
        console.log('fail:' + JSON.stringify(err))
      }
    })
  })
}
const loopTime = () => {
  let s = 0
  state.timeQuestions = setInterval(() => {
    s++
    if (s >= 2) {
      s = 0
      orderStatusFun()
    }
  }, 1000)
}
const orderStatusFun = () => {
  let param = bizOrderNo.value
  orderStatus(param).then((res) => {
    if (res.data.payState == 'PROGRESS') {
    } else if (res.data.payState == 'SUCCESS') {
      let params = {
        userId: userInfoNew.value.userId,
        empi: userInfo.value.empi
      }
      base_info(params).then((res) => {
        const info = Object.assign({}, JSON.parse(uni.getStorageSync('userInfo')))
        info.patientInfo = res.data
        store.commit('SET_USERINFO', info)
        clearInterval(state.timeQuestions)
        state.timeQuestions = null
        uni.showToast({
          title: '支付成功',
          icon: 'none',
          duration: 2000
        })
        // setTimeout(() => {
        //   uni.navigateBack()
        // }, 2000)
        setTimeout(() => {
          uni.switchTab({
            url: '/pages/index/index'
          })
        }, 2000)
      })
    } else if (res.data.payState == 'REFUNDED' || res.data.payState == 'CLOSE') {
      isShow.value = false
      //   uni.showToast({
      //     title: '支付失败',
      //     icon: 'none'
      //   })
      clearInterval(state.timeQuestions)
    }
  })
}
</script>

<style lang="scss" scoped>
.wrap {
  min-height: 100vh;
  .contentWrap {
    padding-bottom: 170rpx;
    .img {
      width: 100%;
      height: 1152rpx;
      display: block;
      margin-top: 50rpx;
    }
  }
  .btnWrap {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to bottom, #fcf0e2, #ffffff);
    // background-image: linear-gradient(to bottom, #ff4a00, #ffffff);
    .btn {
      padding: 32rpx 32rpx 24rpx;
      .img {
        height: 88rpx;
        width: 100%;
      }
    }
  }
  ::v-deep .u-popup {
    .title {
      height: 108rpx;
      line-height: 108rpx;
      text-align: center;
      font-weight: 700;
      font-size: 32rpx;
      color: #222;
      border-bottom: 1px solid #e5e6eb;
    }
    .contentVisit {
      padding: 22rpx 32rpx;
      margin: 32rpx;
      background: #fafafa;
      border-radius: 8rpx;
      .name {
        display: inline-block;
        vertical-align: middle;
        font-size: 30rpx;
        color: #222;
        margin-right: 24rpx;
        &:nth-child(4) {
          padding: 2rpx 24rpx;
          background: #00d1b6;
          color: #fff;
          font-size: 24rpx;
          border-radius: 18rpx;
          margin-right: 0;
        }
      }
    }
    .pay {
      padding: 24rpx 32rpx 32rpx;
      padding-bottom: calc(32rpx + constant(safe-area-inset-bottom));
      padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
      .payName {
        height: 88rpx;
        line-height: 88rpx;
        background: #00d1b6;
        color: #fff;
        font-weight: 700;
        font-size: 32rpx;
        text-align: center;
        // margin: 0rpx 32rpx;
        border-radius: 44rpx;
      }
    }
  }
  ::v-deep .u-icon__icon {
    font-size: 32rpx !important;
    line-height: 50rpx !important;
  }
}
</style>
